import React, { memo, useEffect, useRef } from "react";
import style from "./sty.module.css";

import Scroll from "@/components/scroll";
import { Modal } from "antd-mobile";
import { useSelector } from "react-redux";

const alert = Modal.alert;

const PlayList = () => {
  const scrollRef = useRef(null);
  const {
    mode,
    playlist,
    isShowPlaylist,
    likeSongs,
    currentSong,
  } = useSelector((state) => ({
    currentSong: state.getIn(["curSong"]),
    mode: state.getIn(["sequence"]),
    playlist: state.getIn(["playList"]),
    isShowPlaylist: state.getIn(["isShowPlaylist"]),
    likeSongs: state.getIn(["likeSongs"]),
  }));

  useEffect(() => {
    //当currentSong变化或者刚打开playlist组件时调用
    if (currentSong.id) {
      scrollToCurrent();
    }
  }, [currentSong.id]);

  const changeMode = () => {
    this.props.appStore.changeMode();
  };
  const close = () => {
    this.props.appStore.setStore({
      isShowPlaylist: false,
    });
  };
  const stop = (e) => {
    e.stopPropagation();
  };
  const scrollToCurrent = () => {
    const currentIndex = this.props.appStore.currentIndex;
    const currentDom = this[`item${currentIndex}`];
    // this.scroll && this.scroll.scrollToElement(currentDom, 300);
  };
  const selectItem = (index) => {};
  const deleteSong = (index, e) => {
    e.stopPropagation();
    this.props.appStore.deleteSong(index);
  };
  const setLikes = (item, e) => {
    e.stopPropagation();
    this.props.appStore.setLikes(item);
  };
  const clear = () => {
    alert("提示", "确定清空播放列表吗?", [
      { text: "取消" },
      {
        text: "确定",
        onPress: () => {
          this.props.appStore.setStore({
            playlist: [],
            currentIndex: -1,
            isShowPlaylist: false,
          });
        },
      },
    ]);
  };

  const icons = ["icon-xunhuanbofang", "icon-suijibofang", "icon-danquxunhuan"];
  const texts = ["顺序播放", "随机播放", "单曲循环"];
  return (
    <div
      className={style.wrapper}
      style={{ display: isShowPlaylist ? "" : "none" }}
      onClick={close}
    >
      <div className={style["list-wrapper"]} onClick={stop}>
        <div className={style["list-top"]}>
          <div onClick={changeMode}>
            <span className={`iconfont ${icons[mode]} ${style.icon}`} />
            <span className={style.text}>{texts[mode]}</span>
            <span className={style.num}>({playlist.length})</span>
          </div>
          <div onClick={clear}>
            <span
              className={`iconfont icon-lvzhou_shanchu_lajitong ${style.icon}`}
            />
          </div>
        </div>
        <div className={style["list-main"]}>
          <Scroll ref={scrollRef}>
            <ul>
              {playlist &&
                playlist.map((item, index) => (
                  <li
                    key={item.id}
                    onClick={() => this.selectItem(index)}
                    ref={(li) => (this[`item${index}`] = li)}
                    className={item.id === currentSong.id ? style.active : ""}
                  >
                    <div>{item.name}</div>
                    <div>
                      <span
                        className={`iconfont ${
                          likeSongs.some((i) => i.id === item.id)
                            ? "icon-xihuan1"
                            : "icon-xihuan"
                        }`}
                        onClick={(e) => setLikes(item, e)}
                      />
                      <span
                        className={style.remove}
                        onClick={(e) => deleteSong(index, e)}
                      >
                        ×
                      </span>
                    </div>
                  </li>
                ))}
            </ul>
          </Scroll>
        </div>
        <div className={style["list-bottom"]} onClick={close}>
          关闭
        </div>
      </div>
    </div>
  );
};

export default memo(PlayList);
